<html>

<head>
    <meta charset="utf-8" />
    <title>ADS-B飞行轨迹</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <script src='https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.js'></script>
    <link href='https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.css' rel='stylesheet' />
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script>
        mapboxgl.accessToken =
            "pk.eyJ1IjoicXE5Njk4MjEyODUiLCJhIjoiY2trN3A1NDRoMGcwaDMzbzAwbmp5Nm1kZSJ9.bex4Q9HSw4b9qOLnJZZktA";
        var map = new mapboxgl.Map({
            container: "map", // container id
            style: "mapbox://styles/qq969821285/ckkdnmm170gqa17myry4uy61x", //hosted style id
            center: [112.99, 28.22], // starting position
            zoom: 8, // starting zoom
        });
    </script>
</body>

</html>